<template>
  <a-modal
    title="违停短信详情"
    :width="1000"
    :visible="visible"
    :destroyOnClose="true"
    :keyboard="false"
    :maskClosable="false"
    :closable="false"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button type="primary" @click="handleCancel">关闭</a-button>
    </template>
    <div class="gutter-example">
      <a-row :gutter="20">
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box">
            <img-zoom :src="imgUrl" width="460" height="320" :bigsrc="imgUrl" :configs="configs"></img-zoom>
          </div>
          <div class="img-box">
            <div @click="changeImg(detailInfo.startImg1)">
              <img :src="startImg1" alt="">
            </div>
            <div @click="changeImg(detailInfo.startImg2)">
              <img :src="startImg2" alt="">
            </div>
            <div @click="changeImg(detailInfo.endImg1)">
              <img :src="endImg1" alt="">
            </div>
            <div @click="changeImg(detailInfo.endImg2)">
              <img :src="endImg2" alt="">
            </div>
            <div @click="changeImg(detailInfo.fourImg)">
              <img :src="fourImg" alt="">
            </div>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="12">
          <div class="area-box">
            <a-form :form="formData">
              <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="车牌号">
                <a-input v-decorator="['plateNo']"/>
              </a-form-item>
              <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="违停时间">
                <a-input
                  v-decorator="['illegalTime']"
                  style="width: 100%"
                />
              </a-form-item>
              <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="违法类型">
                <a-select v-decorator="['illegalType']" @change="handleProvinceChange">
                  <a-select-option v-for="(action) in dictDataIllegalType" :key="action.dictValue">
                    {{ action.dictLabel }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="道路名称">
                <a-textarea v-decorator="['roadName']"/>
              </a-form-item>
              <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="发送响应">
                <a-textarea v-decorator="['sendResponseMsg']"/>
              </a-form-item>
              <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="写入响应">
                <a-textarea v-decorator="['writeResponseMsg']"/>
              </a-form-item>
            </a-form>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script>
import imgZoom from 'vue2.0-zoom'
import { dictDataList } from '@/api/system'
import pick from 'lodash.pick'
import moment from 'moment'

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 12 }
}

export default {
  name: 'OperateLogDetails',
  components: {
    imgZoom
  },
  data () {
    return {
      visible: false,
      detailInfo: [],
      dictDataIllegalType: [],
      formData: this.$form.createForm(this, { name: 'dynamic_rule' }),
      formItemLayout,
      imgUrl: '',
      startImg1: '',
      startImg2: '',
      endImg1: '',
      endImg2: '',
      fourImg: '',
      defaultImag: require('@/assets/no_img.jpg'),
      imageUrlPrefix: process.env.VUE_APP_IMAGE_URL_PREFIX,
      picker: moment('00:00', 'HH:mm'),
      configs: {
        width: 620,
        height: 320,
        maskWidth: 100,
        maskHeight: 100,
        maskColor: '#ccc',
        maskOpacity: 0.2
      }
    }
  },
  created () {
    this.loadDictDataIllegalType()
  },
  methods: {
    loadDictDataIllegalType () {
      dictDataList({ dictType: 'illegal_type' }).then(res => {
        this.dictDataIllegalType = res.data
      })
    },
    details (record) {
      this.visible = true
      this.imgUrl = record.startImg1 ? (this.imageUrlPrefix + record.startImg1) : this.defaultImag
      this.startImg1 = record.startImg1 ? (this.imageUrlPrefix + record.startImg1) : this.defaultImag
      this.startImg2 = record.startImg2 ? (this.imageUrlPrefix + record.startImg2) : this.defaultImag
      this.endImg1 = record.endImg1 ? (this.imageUrlPrefix + record.endImg1) : this.defaultImag
      this.endImg2 = record.endImg2 ? (this.imageUrlPrefix + record.endImg2) : this.defaultImag
      this.fourImg = record.fourImg ? (this.imageUrlPrefix + record.fourImg) : this.defaultImag
      this.detailInfo = record
      this.mdl = Object.assign({}, record)
      this.mdl.illegalTime = moment(Number(record.illegalTime)).format('YYYY-MM-DD HH:mm:ss')
      this.$nextTick(() => {
        this.formData.setFieldsValue(pick(this.mdl, 'illegalType', 'roadName', 'illegalTime', 'plateNo', 'sendResponseMsg', 'writeResponseMsg'))
      })
    },
    changeImg (url) {
      this.imgUrl = url ? (this.imageUrlPrefix + url) : this.defaultImag
    },
    handleProvinceChange (val) {
      console.log(val)
    },
    onOk () {
      this.visible = false
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
  .gutter-box {
    padding: 5px 0;
    background: #222;
    text-align: center;
    .text {
      color: red;
      margin: 0 5px 5px;
      font-size: 12px;
      text-align: left;
    }
  }
  .img-box {
    margin-top: 10px;
    display: flex;
    > div {
      width: 50px;
      margin-right: 10px;
      border: solid 1px #ddd;
      cursor: pointer;
    }
    img {
      width: 100%;
      height: 100%;
      padding: 5px 0;
    }
  }
</style>
<style scoped>
  .gutter-example >>> .ant-row > div {
    background: transparent;
    border: 0;
  }
</style>
